<template>
    <span v-if="option === 'state'">
      <div
          class="app_state">
        <el-tag
            color="#2f54eb"
            v-if="data['jobState'] === 0">ADDED</el-tag>
          <el-tag
              color="#1AB58E"
              v-if="data['jobState'] === 1"
              class="status-processing-starting">
              <span  style="color: white">STARTING</span>
            </el-tag>
        <el-tag
            color="#108ee9"
            v-if="data['jobState'] === 2">DEPLOYED</el-tag>
        <el-tag
            color="#738df8"
            v-if="data['jobState'] === 3"
            class="status-processing-initializing">INITIALIZING</el-tag>
        <el-tag
            color="#2f54eb"
            v-if="data['jobState'] === 4">CREATED</el-tag>
        <el-tag
            color="#13c2c2"
            v-if="data['jobState'] === 6"
            class="status-processing-restarting">RESTARTING</el-tag>
        <el-tag
            color="#52c41a"
            v-if="data['jobState'] === 7"
            class="status-processing-running">RUNNING</el-tag>
        <el-tag
            color="#fa541c"
            v-if="data['jobState'] === 8"
            class="status-processing-failing">FAILING</el-tag>
        <el-tag
            color="#f5222d"
            v-if="data['jobState'] === 9">FAILED</el-tag>
        <el-tag
            color="#faad14"
            v-if="data['jobState'] === 10"
            class="status-processing-cancelling">CANCELLING</el-tag>
        <el-tag
            color="#fa8c16"
            v-if="data['jobState'] === 11">CANCELED</el-tag>
        <el-tag
            color="#1890ff"
            v-if="data['jobState'] === 12">
          <span  style="color: white">FINISHED</span>

       </el-tag>
        <el-tag
            color="#722ed1"
            v-if="data['jobState'] === 13">SUSPENDED</el-tag>
        <el-tag
            color="#eb2f96"
            v-if="data['jobState'] === 14"
            class="status-processing-reconciling">RECONCILING</el-tag>
        <el-tag
            color="#000000"
            v-if="data['jobState'] === 15">LOST</el-tag>
        <el-tag
            color="#13c2c2"
            v-if="data['jobState'] === 16"
            class="status-processing-restarting">MAPPING</el-tag>
        <el-tag
            color="#738df8"
            v-if="data['jobState'] === 19"
            class="status-processing-initializing">SILENT</el-tag>
        <el-tag
            color="#8E50FF"
            v-if="data['jobState'] === 20">TERMINATED</el-tag>
        <el-tag
            color="#1890ff"
            v-if="data['jobState'] === 21">FINISHED</el-tag>
      </div>
    </span>
  <span v-else-if="option === 'deploy'" class="app_state">
      <el-tag
          v-if="data['deployState'] === -1"
          color="#f5222d">FAILED</el-tag>
      <el-tag
          v-if="data['deployState'] === 0"
          color="#52c41a">DONE</el-tag>
      <el-tag
          v-if="data['deployState'] === 1"
          class="status-processing-deploying"
          color="#52c41a">DEPLOYING</el-tag>
      <el-tag
          v-if="data['deployState'] === 2"
          color="#fa8c16">NEED DEPLOY</el-tag>
    </span>
  <span v-else>
      <div
          class="task-tag"
          v-if="data['state'] === 6 || data['state'] === 7 || data['state'] === 9 || data['optionState'] === 4">
        <a-tooltip
            v-if="data['totalTask']">
          <template slot="title">
            TOTAL
          </template>
          <el-tag color="#102541">{{ data['totalTask'] }}</el-tag>
        </a-tooltip>
        <a-tooltip v-if="data.overview && data.overview['running']">
          <template slot="title">
            RUNNING
          </template>
          <el-tag color="#52c41a">{{ data.overview['running'] }}</el-tag>
        </a-tooltip>
        <a-tooltip v-if="data.overview && data.overview['canceled']">
          <template slot="title">
            CANCELED
          </template>
          <el-tag color="#fa8c16">{{ data.overview['canceled'] }}</el-tag>
        </a-tooltip>
        <a-tooltip v-if="data.overview && data.overview['canceling']">
          <template slot="title">
            CANCELING
          </template>
          <el-tag color="#faad14">{{ data.overview['canceling'] }}</el-tag>
        </a-tooltip>
        <a-tooltip v-if="data.overview && data.overview['created']">
          <template slot="title">
            CREATED
          </template>
          <el-tag color="#2f54eb">{{ data.overview['created'] }}</el-tag>
        </a-tooltip>
        <a-tooltip v-if="data.overview && data.overview['deploying']">
          <template slot="title">
            DEPLOYING
          </template>
          <el-tag color="#13c2c2">{{ data.overview['deploying'] }}</el-tag>
        </a-tooltip>
        <a-tooltip v-if="data.overview && data.overview['failed']">
          <template slot="title">
            FAILED
          </template>
          <el-tag color="#f5222d">{{ data.overview['failed'] }}</el-tag>
        </a-tooltip>
        <a-tooltip v-if="data.overview && data.overview['finished']">
          <template slot="title">
            FINISHED
          </template>
          <el-tag color="#1890ff">{{ data.overview['finished'] }}</el-tag>
        </a-tooltip>
        <a-tooltip v-if="data.overview && data.overview['reconciling']">
          <template slot="title">
            RECONCILING
          </template>
          <el-tag color="#eb2f96">{{ data.overview['reconciling'] }}</el-tag>
        </a-tooltip>
        <a-tooltip v-if="data.overview && data.overview['scheduled']">
          <template slot="title">
            SCHEDULED
          </template>
          <el-tag color="#722ed1">{{ data.overview['scheduled'] }}</el-tag>
        </a-tooltip>
      </div>
      <div v-else>-</div>
    </span>
</template>
<script>
export default {
  name: 'State',
  props: {
    option: {
      type: String,
      default: 'state'
    },
    data: {
      type: Object,
      default: null
    }
  }
}
</script>

<style lang='less' scoped>
.app_state, .task-tag {
  width: 80px;
}

.status-processing-deploying {
  animation: deploying-color 800ms ease-out infinite alternate;
}

.status-processing-initializing {
  animation: initializing-color 800ms ease-out infinite alternate;
}

.status-processing-starting {
  animation: starting-color 800ms ease-out infinite alternate;
}

.status-processing-restarting {
  animation: restarting-color 800ms ease-out infinite alternate;
}

.status-processing-running {
  animation: running-color 800ms ease-out infinite alternate;
}

.status-processing-failing {
  animation: failing-color 800ms ease-out infinite alternate;
}

.status-processing-cancelling {
  animation: cancelling-color 800ms ease-out infinite alternate;
}

.status-processing-reconciling {
  animation: reconciling-color 800ms ease-out infinite alternate;
}


@keyframes deploying-color {
  0% {
    border-color: #1ABBDC;
    box-shadow: 0 0 1px #1ABBDC, inset 0 0 2px #1ABBDC;
  }
  100% {
    border-color: #1ABBDC;
    box-shadow: 0 0 10px #1ABBDC, inset 0 0 5px #1ABBDC;
  }
}

@keyframes initializing-color {
  0% {
    border-color: #738df8;
    box-shadow: 0 0 1px #738df8, inset 0 0 2px #738df8;
  }
  100% {
    border-color: #738df8;
    box-shadow: 0 0 10px #738df8, inset 0 0 5px #738df8;
  }
}

@keyframes starting-color {
  0% {
    border-color: #1AB58E;
    box-shadow: 0 0 1px #1AB58E, inset 0 0 2px #1AB58E;
  }
  100% {
    border-color: #1AB58E;
    box-shadow: 0 0 10px #1AB58E, inset 0 0 5px #1AB58E;
  }
}

@keyframes restarting-color {
  0% {
    border-color: #13c2c2;
    box-shadow: 0 0 1px #13c2c2, inset 0 0 2px #13c2c2;
  }
  100% {
    border-color: #13c2c2;
    box-shadow: 0 0 10px #13c2c2, inset 0 0 5px #13c2c2;
  }
}

@keyframes running-color {
  0% {
    border-color: #52c41a;
    box-shadow: 0 0 1px #52c41a, inset 0 0 2px #52c41a;
  }
  100% {
    border-color: #52c41a;
    box-shadow: 0 0 10px #52c41a, inset 0 0 5px #52c41a;
  }
}

@keyframes failing-color {
  0% {
    border-color: #fa541c;
    box-shadow: 0 0 1px #fa541c, inset 0 0 2px #fa541c;
  }
  100% {
    border-color: #fa541c;
    box-shadow: 0 0 10px #fa541c, inset 0 0 5px #fa541c;
  }
}

@keyframes cancelling-color {
  0% {
    border-color: #faad14;
    box-shadow: 0 0 1px #faad14, inset 0 0 2px #faad14;
  }
  100% {
    border-color: #faad14;
    box-shadow: 0 0 10px #faad14, inset 0 0 5px #faad14;
  }
}

@keyframes reconciling-color {
  0% {
    border-color: #eb2f96;
    box-shadow: 0 0 1px #eb2f96, inset 0 0 2px #eb2f96;
  }
  100% {
    border-color: #eb2f96;
    box-shadow: 0 0 10px #eb2f96, inset 0 0 5px #eb2f96;
  }
}
</style>
